<template>
  <div id="info_tab">
    <!-- <img src="../../assets/info/tab_bg.jpg" alt=""> -->
    <div class="container" style="height:100%;">
      <div class="tab">
        <routerLink to="/info" class="tabLists" @click="tablist=0" :class="{tabListsbottom:tablist==0}">
          <img src="../../assets/info/entreprise_show.png" alt class="tabListsImg" v-show="tablist!=0"/>
          <img src="../../assets/info/entreprise_showActive.png" alt class="tabListsImg" v-show="tablist==0"/>
          <span class="tabListsText" :class="{tabListsTextActive:tablist==0}">国内展会</span>
        </routerLink>
        <routerLink to="/info/foreign_show" class="tabLists" @click="tablist=1" :class="{tabListsbottom:tablist==1}">
            <img src="../../assets/info/foreign_show.png" alt class="tabListsImg" v-show="tablist!=1"/>
            <img src="../../assets/info/foreign_showActive.png" alt class="tabListsImg" v-show="tablist==1"/>
          <span class="tabListsText" :class="{tabListsTextActive:tablist==1}">国外展会</span>
        </routerLink>
        <routerLink to="/info/industry_show" class="tabLists" @click="tablist=2" :class="{tabListsbottom:tablist==2}">
            <img src="../../assets/info/inland_show.png" alt class="tabListsImg" v-show="tablist!=2"/>
            <img src="../../assets/info/inland_showActive.png" alt class="tabListsImg" v-show="tablist==2"/>
          <span class="tabListsText" :class="{tabListsTextActive:tablist==2}">行业展会</span>
        </routerLink>
        <routerLink to="/info/new_show" class="tabLists" @click="tablist=3" :class="{tabListsbottom:tablist==3}">
            <img src="../../assets/info/new_show.png" alt class="tabListsImg" v-show="tablist!=3"/>
            <img src="../../assets/info/new_showActive.png" alt class="tabListsImg" v-show="tablist==3"/>
          <span class="tabListsText" :class="{tabListsTextActive:tablist==3}">最新展会</span>
        </routerLink>
        <routerLink to="/info/hot_show" class="tabLists" @click="tablist=4" :class="{tabListsbottom:tablist==4}">
            <img src="../../assets/info/hot_show.png" alt class="tabListsImg" v-show="tablist!=4"/>
            <img src="../../assets/info/hot_showActive.png" alt class="tabListsImg" v-show="tablist==4"/>
          <span class="tabListsText" :class="{tabListsTextActive:tablist==4}">热门展会</span>
        </routerLink>
      </div>
    </div>
  </div>
</template>
<script>
export default {
    props:{
        showType:String
    },
    data() {
        return {
            tablist:'0'
        }
    },
    created() {
        this.tablist=this.showType;
    },
};
</script>

<style lang="scss" scoped>
#info_tab {
  width: 100%;
  height: 500px;
  background: url(../../assets/info/tab_bg.jpg) no-repeat center;
  // background-attachment: fixed;
  position: relative;
  .tab {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    .tabLists {
      width: 148px;
      height: 250px;
      cursor: pointer;
      // background-color:red;
      .tabListsImg {
        display: block;
        width: 100%;
      }
      .tabListsText {
        color: #fff;
        display: inline-block;
        margin: 0 auto;
        padding: 40px 4px;
        font-size: 22px;
        height: 40px;
        line-height: 40px;
        border-bottom: 1px solid #fff;
      }
      .tabListsTextActive{
          color: #c81622;
          border-bottom: 1px solid #c81622;
      }
    }
    .tabListsbottom::after{
        content: "";
        display: block;
        position: absolute;
        bottom: -48px;
        // left: 250px;
        z-index: 10;
        width: 120px;
        height: 48px;
        background-image: url(../../assets/info/triangle_black.png);
        background-repeat:no-repeat;
        background-size:100%;
        background-position: 10px 0;
    }
  }
}
</style>